<template>
	<div class="u-page u-general-color">
		<u-navbar :title="title" :background="background" :border-bottom="false" :title-bold="true"
			title-color="#040503" back-icon-color="#040503"></u-navbar>
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">
					<!-- <div class="aui-flex aui-choice-white b-line u-center u-font-bold u-pt-30 u-pb-30">
						<u-divider color="#e55e97" fontSize="30" border-color="#e55e97" bg-color="#fffbfe">玫丽测评师</u-divider>
					</div> -->
						
					<!-- 测评喜好【主】品类 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">测评喜好（1个主类目）</div>
							<div style="width: auto;margin-top: 10px;">
								<!-- 选项列表 -->
								<ul>
								  <li
									  class="u-inline u-pointer"
									  v-for="(citem, cindex) in MainCategoryList"
									  :key="cindex"
									  @click="selectItemMain(citem)"
								  >
									<u-tag
										:text="citem.label"
										:type="citem.isSelect ? 'primary' : 'info'"
										:mode="citem.isSelect ? 'light' : 'dark'"
										:bg-color="citem.isSelect ? '#f3e4e9' : '#f7f5f8'"
										:color="citem.isSelect ? '#eb5468' : ''"
										border-color="#fffbfe"
									></u-tag>
									<div style="height: 5px;"></div>
								  </li>
								</ul>
							</div>
						</div>
					</div>
					
					<!-- 测评喜好【副】品类-->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">测评喜好（3个副类目）</div>
							<div style="width: auto;margin-top: 10px;">
								<!-- 选项列表 -->
								<ul>
								  <li
									  class="u-inline u-pointer"
									  v-for="(citem, cindex) in SecondCategoryList"
									  :key="cindex"
									  @click="selectItemSecond(citem)"
								  >
									<u-tag
										:text="citem.label"
										:type="citem.isSelect ? 'primary' : 'info'"
										:mode="citem.isSelect ? 'light' : 'dark'"
										:bg-color="citem.isSelect ? '#f3e4e9' : '#f7f5f8'"
										:color="citem.isSelect ? '#eb5468' : ''"
										border-color="#fffbfe"
									></u-tag>
									<div style="height: 5px;"></div>
								  </li>
								</ul>
							</div>
						</div>
					</div>
					
					<!-- 兴趣领域 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">兴趣领域(多选)</div>
							<div style="width: auto;margin-top: 10px;">
								<!-- 选项列表 -->
								<ul>
								  <li
									  class="u-inline u-pointer"
									  v-for="(citem, cindex) in InterestsList"
									  :key="cindex"
									  @click="selectItem(citem)"
								  >
									<u-tag
										:text="citem.label"
										:type="citem.isSelect ? 'primary' : 'info'"
										:mode="citem.isSelect ? 'light' : 'dark'"
										:bg-color="citem.isSelect ? '#f3e4e9' : '#f7f5f8'"
										:color="citem.isSelect ? '#eb5468' : ''"
										border-color="#fffbfe"
									></u-tag>
									<div style="height: 5px;"></div>
								  </li>
								</ul>
							</div>
						</div>
					</div>
					
					<!-- 抖音平台 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">抖音平台</div>
						<u-input type="select" v-model="evaluator.tiktok" input-align="right" placeholder="请选择" @click="visible4 = true"></u-input>
					</div>
					<u-select :list="HaveList" @confirm="(event) => (evaluator.tiktok = event[0].value)"
						v-model="visible4" confirm-color="#eb5468"></u-select>
						
					<div v-if="evaluator.tiktok == '有'">
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">抖音粉丝数</div>
							<!-- <u-input type="number" v-model="evaluator.tiktokFans" input-align="right" placeholder="请填写抖音粉丝数"></u-input> -->
							<u-input type="select" v-model="evaluator.tiktokFans" input-align="right" height="100" placeholder="请选择" @click="show1 = true"/>
							<u-select v-model="show1" mode="mutil-column-auto" confirm-color="#eb5468" :list="ColumnDataList" @confirm="(event) => (evaluator.tiktokFans = event[1].value)"></u-select>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">抖音获赞数</div>
							<!-- <u-input type="number" v-model="evaluator.tiktokLikes" input-align="right" placeholder="请填写抖音获赞数"></u-input> -->
							<u-input type="select" v-model="evaluator.tiktokLikes" input-align="right" height="100" placeholder="请选择" @click="show2 = true"/>
							<u-select v-model="show2" mode="mutil-column-auto" confirm-color="#eb5468" :list="ColumnDataList2" @confirm="(event) => (evaluator.tiktokLikes = event[1].value)"></u-select>
						</div>
					</div>
					
					<!-- 小红书平台 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">小红书平台</div>
						<u-input type="select" v-model="evaluator.littleRedBook" input-align="right" placeholder="请选择" @click="visible5 = true"></u-input>
					</div>
					<u-select :list="HaveList" confirm-color="#eb5468" @confirm="(event) => (evaluator.littleRedBook = event[0].value)"
						v-model="visible5"></u-select>
						
					<div v-if="evaluator.littleRedBook == '有'">
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">小红书粉丝数</div>
							<!-- <u-input type="number" v-model="evaluator.littleRedBookFans" input-align="right" placeholder="请填写小红书粉丝数"></u-input> -->
							<u-input type="select" v-model="evaluator.littleRedBookFans" input-align="right" height="100" placeholder="请选择" @click="show3 = true"/>
							<u-select v-model="show3" mode="mutil-column-auto" confirm-color="#eb5468" :list="ColumnDataList" @confirm="(event) => (evaluator.littleRedBookFans = event[1].value)"></u-select>
						</div>
						
						<div class="aui-flex aui-choice-white b-line">
							<div class="aui-flex-box">小红书获赞与收藏数</div>
							<!-- <u-input type="number" v-model="evaluator.littleRedBookLikes" input-align="right" placeholder="请填写小红书获赞数"></u-input> -->
							<u-input type="select" v-model="evaluator.littleRedBookLikes" input-align="right" height="100" placeholder="请选择" @click="show4 = true"/>
							<u-select v-model="show4" mode="mutil-column-auto" confirm-color="#eb5468" :list="ColumnDataList2" @confirm="(event) => (evaluator.littleRedBookLikes = event[1].value)"></u-select>
						</div>
						
					</div>
					
					<!-- 其他社交平台 -->
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">
							<div class="aui-flex-box">其他社交平台<span style="color: red;">（选填）</span></div>
							<div style="width: auto;margin-top: 10px;">
								<u-input
									type="textarea"
									placeholder="请填写其他社交平台概况，如：快手:粉丝数300，获赞数1000"
									maxlength="-1"
									height="150"
									v-model="evaluator.otherPlatforms"
								></u-input>
							</div>
						</div>	
					</div>
					
				</div>
			</section>
				
			<div style="height: 80rpx;"></div>
				
			<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
				<div class="u-pt-20 u-pb-40" style="width: 90%;margin: 0 auto;height: 80px;">
					<u-button type="success" :custom-style="customStyle" @click="Save">
						{{buttonName}}
					</u-button>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import shareMixins from '@/mixins/share';
	export default {
		mixins: [shareMixins],
		data() {
			return {
				form: {// 基本信息
					id: '',// meily_customer表唯一id
					userId: '',
					userName: '',
					realName: '',
					avatarUrl: '',
					sex: '',
					ageGroup: '',
					identityJob: '',
					monthlyIncome: '',
					phoneNumber: '',
					region: "",
					streetVillage: "",
					address: '',
					openid: '',
					unionid: '',
					subscriptionOpenid: ''
				},
				evaluator: {
					id: '',// meily_personal_info表唯一id
					userId: '',
					interests: '',
					tiktok: '',
					tiktokFans: '',
					tiktokLikes: '',
					littleRedBook: '',
					littleRedBookFans: '',
					littleRedBookLikes: '',
					littleRedBookFavs: '',
					otherPlatforms: '',
					mainCategory: '',
					secondCategory: ''
				},
				HaveList: [],
				InterestsList: [],
				MonthlyIncomeList: [],
				MainCategoryList: [],
				SecondCategoryList: [],
				ColumnDataList: [],
				ColumnDataList2: [],
				visible4: false,
				visible5: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				title: '申请玫丽测评师',
				buttonName: '提交申请',
				background: {
					backgroundColor: '#f3e4e9',
				},
				customStyle: {
					background: '#eb5468 !important'
				},
				action: '',// 修改还是申请
				frombusiness: '0', // 是否来自业务。0:不是；1:是
			};
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
				return false;
			}
			
			let form_info = decodeURIComponent(options.form)
			if (this.isNotNull(form_info)) {
				this.form = JSON.parse(form_info)
			} else {
				// 获取基本信息
				this.getBasicInfo();
			}
			
			if(options.action == 'edit'){
				this.action = options.action;
				this.title = '玫丽测评师资料';
				this.buttonName = '保存';
			}
			
			// 判断是否从业务检验测评师资料未完善进来的
			if(this.isNotNull(options.frombusiness)){
				this.frombusiness = options.frombusiness;
			}
			
			console.log("*******EvaluationRegister********");
			console.log("this.frombusiness=", this.frombusiness)
			
			// 初始化下拉选择的值
			this.initSelectList();
		},

		methods: {
			
			/**
			 * 获取基本信息
			 */
			async getBasicInfo() {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/customer/applet/info/" + userInfo.userId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if(this.isNotNull(result.data)){
						this.form = result.data;
					}
					// 初始化用户信息
					this.form.userId = userInfo.userId;
					this.form.userName = userInfo.nickName;
					this.form.avatarUrl = userInfo.avatarUrl;
					this.form.openid = userInfo.openid;
					this.form.unionid = userInfo.unionid;
				} else {
					this.$u.toast(result.msg)
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},
			
			/**
			 * 初始化下拉选择的值（BPM）
			 */
			async initSelectList() {
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyRequest({
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					appid: 'Archives',
					wf_num: 'R_Archives_B001',
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				result = JSON.parse(JSON.stringify(result));
				if (result.code == 200) {
					this.HaveList = result.data.HaveList;
					this.InterestsList = result.data.InterestsList;
					this.ColumnDataList = result.data.ColumnDataList;
					this.ColumnDataList2 = result.data.ColumnDataList2;
					this.MonthlyIncomeList = result.data.MonthlyIncomeList;
					this.MainCategoryList = result.data.MainCategoryList;
					this.SecondCategoryList = result.data.SecondCategoryList;
					// 获取测评师资料
					/* 注意：必须放在initSelectList()方法执行成功之后，因为接口是异步的，如果不放在这，
					可能会导致兴趣领域的下拉数据没加载出来，而getEvaluatorInfo()已经执行完毕，则兴趣领域标签显示就会出错，
					从而导致保存时，数据可能会出现重复。 */
					this.getEvaluatorInfo();
				}
			},

			/**
			 * 获取测评师资料
			 */
			async getEvaluatorInfo(){
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/personalInfo/getPersonalInfo",
					userId: userInfo.userId,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if(this.isNotNull(result.data)){
						this.evaluator = result.data;
						
						// ------start------渲染兴趣领域------start------
						if(this.isNotNull(this.evaluator.interests)){
							let isSelectList =  this.RestructuringLabel(this.evaluator.interests);
							isSelectList.forEach((item) => {
								this.InterestsList.forEach((citem) => {
									if (item.value == citem.value) {
										item.isSelect = true;
									}
									// 标签同步选中或者取消
									this.isExistInArr(this.InterestsList,item,true);
								});
							});
						}
						// 渲染完毕，需要将this.evaluator.interests清空，否则会出现重复数据
						this.evaluator.interests = "";
						// -------end-------渲染兴趣领域-------end-------
						
						// ------start------渲染测评喜好【主】品类------start------
						if(this.isNotNull(this.evaluator.mainCategory)){
							let isSelectListMain =  this.RestructuringLabel(this.evaluator.mainCategory);
							isSelectListMain.forEach((item) => {
								this.MainCategoryList.forEach((citem) => {
									if (item.value == citem.value) {
										item.isSelect = true;
									}
									// 标签同步选中或者取消
									this.isExistInArr(this.MainCategoryList,item,true);
								});
							});
						}
						// 渲染完毕，需要将this.evaluator.mainCategory清空，否则会出现重复数据
						this.evaluator.mainCategory = "";
						// -------end-------渲染测评喜好【主】品类-------end-------
						
						// ------start------渲染测评喜好【副】品类------start------
						if(this.isNotNull(this.evaluator.secondCategory)){
							let isSelectListSecond =  this.RestructuringLabel(this.evaluator.secondCategory);
							isSelectListSecond.forEach((item) => {
								this.SecondCategoryList.forEach((citem) => {
									if (item.value == citem.value) {
										item.isSelect = true;
									}
									// 标签同步选中或者取消
									this.isExistInArr(this.SecondCategoryList,item,true);
								});
							});
						}
						// 渲染完毕，需要将this.evaluator.secondCategory清空，否则会出现重复数据
						this.evaluator.secondCategory = "";
						// -------end-------渲染测评喜好【副】品类-------end-------
					}
				} else {
					this.$u.toast(result.msg)
					setTimeout(() => {
						this.goBack()
					}, 2500)
				}
			},
			
			/**
			 * 保存
			 */
			async Save() {
				
				// 保存前需要清空字段数据
				this.evaluator.mainCategory = '';
				this.evaluator.secondCategory = '';
				this.evaluator.interests = '';
				
				// 解析测评喜好【主】品类
				this.MainCategoryList.forEach((item) => {
					if(item.isSelect){
						if(this.isNotNull(this.evaluator.mainCategory)){
							this.evaluator.mainCategory += ',' + item.value
						} else {
							this.evaluator.mainCategory = item.value
						}
					}
				});
				
				// 解析测评喜好【副】品类
				this.SecondCategoryList.forEach((item) => {
					if(item.isSelect){
						if(this.isNotNull(this.evaluator.secondCategory)){
							this.evaluator.secondCategory += ',' + item.value
						} else {
							this.evaluator.secondCategory = item.value
						}
					}
				});
				
				// 解析兴趣领域
				this.InterestsList.forEach((item) => {
					if(item.isSelect){
						if(this.isNotNull(this.evaluator.interests)){
							this.evaluator.interests += ',' + item.value
						} else {
							this.evaluator.interests = item.value
						}
					}
				});
				
				// 以下是必填校验
				if(!this.isNotNull(this.evaluator.mainCategory) || this.evaluator.mainCategory.split(',').length < 1){
					this.$u.toast("至少选择1个测评喜好主品类！");
					return
				}
				
				if(!this.isNotNull(this.evaluator.secondCategory) || this.evaluator.secondCategory.split(',').length < 3){
					this.$u.toast("至少选择3个测评测评喜好副品类！");
					return
				}
				
				if(!this.isNotNull(this.evaluator.interests) || this.evaluator.interests.split(',').length < 1){
					this.$u.toast("至少选择1个兴趣领域！");
					return
				}
				
				if(this.isNotNull(this.evaluator.tiktok)){
					if(this.evaluator.tiktok == '有'){
						if(!this.isNotNull(this.evaluator.tiktokFans)){
							this.$u.toast("请选择抖音粉丝数！");
							return
						}
						if(!this.isNotNull(this.evaluator.tiktokLikes)){
							this.$u.toast("请选择抖音收藏数！");
							return
						}
					}
				} else {
					this.$u.toast("请选择抖音平台！");
					return
				}
				
				if(this.isNotNull(this.evaluator.littleRedBook)){
					if(this.evaluator.littleRedBook == '有'){
						if(!this.isNotNull(this.evaluator.littleRedBookFans)){
							this.$u.toast("请选择小红书粉丝数！");
							return
						}
						if(!this.isNotNull(this.evaluator.littleRedBookLikes)){
							this.$u.toast("请选择小红书收藏数！");
							return
						}
					}
				} else {
					this.$u.toast("请选择小红书平台！");
					return
				}
				
				// 保存个人资料（无需校验）
				const userInfo = uni.getStorageSync('userInfo');
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/personalInfo/update",
					userId: this.form.userId,
					userName: this.form.userName,
					realName: this.form.realName,
					avatarUrl: this.form.avatarUrl,
					sex: this.form.sex,
					ageGroup: this.form.ageGroup,
					identityJob: this.form.identityJob,
					monthlyIncome: this.form.monthlyIncome,
					phoneNumber: this.form.phoneNumber,
					region: this.form.region,
					streetVillage: this.form.streetVillage,
					address: this.form.address,
					openid: this.form.openid,
					unionid: this.form.unionid,
					subscriptionOpenid: this.form.subscriptionOpenid,
					// 以下是测评师资料
					id: this.evaluator.id,
					mainCategory: this.evaluator.mainCategory,
					secondCategory: this.evaluator.secondCategory,
					interests: this.evaluator.interests,
					tiktok: this.evaluator.tiktok,
					tiktokFans: this.evaluator.tiktokFans,
					tiktokLikes: this.evaluator.tiktokLikes,
					littleRedBook: this.evaluator.littleRedBook,
					littleRedBookFans: this.evaluator.littleRedBookFans,
					littleRedBookLikes: this.evaluator.littleRedBookLikes,
					otherPlatforms: this.evaluator.otherPlatforms,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					this.showMSG('loading','正在提交AI审核···')
					setTimeout(() => {
						this.$u.toast("审核成功");
						// true:已填写完毕；false:尚未填写完毕
						if(result.data){
							setTimeout(() => {
								if(this.frombusiness == '1'){
									wx.navigateBack({
										delta: 2,
									});
								} else {
									this.goBack()
								}
							}, 1500)
						}
					}, 1500)
				} else {
					this.showMSG('error', result.msg)
				}
			},	
				
			/**
			 * 将数组中的某个元素更改为选中/取消状态
			 */
			isExistInArr(arr, item, isSelect) {
				let flag = false
				arr.forEach((titem) => {
					if(item.label == titem.label){
						if(isSelect != 'N'){
							titem.isSelect = isSelect
						}
					}
				});
				return flag
			},
			
			/**
			* 选中标签（兴趣领域）
			*/
			selectItem(item) {
				item.isSelect = !item.isSelect;
			},
			
			/**
			* 选中标签（测评喜好【主】品类）
			*/
			selectItemMain(item) {
				// 单选
				this.MainCategoryList.forEach((citem) => {
					if (item.value == citem.value) {
						item.isSelect = !item.isSelect;
						
					} else {
						citem.isSelect = false;
					}
				});
			},
			
			/**
			* 选中标签（测评喜好【副】品类）
			*/
			selectItemSecond(item) {
				// 多选，只能选三个
				let i = 0;
				this.SecondCategoryList.forEach((citem) => {
					if(item.value != citem.value){
						if(citem.isSelect){
							i++;
						}
					}
				});
				
				if(i < 3){
					item.isSelect = !item.isSelect;
				} else {
					this.showMSG('none', "副品类最多只能选择三个！");
				}
				
			},
			
		},
	};
</script>

<style scoped>
	aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		margin-top: 0;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #f7f7f7;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #353535;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #333;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 30rpx 30rpx;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-flex-triangle {
		position: relative;
		font-size: 14px;
		padding-right: 15px;
	}

	.aui-flex-triangle:before {
		content: '';
		width: 0;
		height: 0;
		border-width: 5px 0px 5px 8px;
		border-style: solid;
		border-color: transparent transparent transparent #7b7b7b;
		position: absolute;
		top: 6px;
		right: 0;
		border-radius: 1;
	}

	.aui-choice-white {
		/* background: #fff; */
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-triangle-clear:before {
		border-color: #fff;
	}

	.aui-flex-box h2 {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.aui-flex-box h3 {
		font-size: 14px;
		padding-bottom: 5px;
	}

	.aui-flex-box p {
		font-size: 12px;
		color: #999;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}
	
	.cnt {
		padding-top: 1px;
		color: #e61111;
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 500;
	}
	
	.popup-box{
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}
	
	.popup-item{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 33rpx;
	}
	
	.discount_info {
		border-bottom: 1px solid black;
		border-left-width: 0;
		border-top-width: 0;
		border-right-width: 0;
		width: 50px;
		height: 30px;
		text-align: center;
		padding-left: 15px;
	}
	
	.swipe-content{
		display: flex;
		flex-direction: row;
		background: #fff;
		border-bottom: 1rpx solid #eee;
		line-height: 35px;
	}
	
	.slot-content2 {
		font-size: 28rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.slot-content3 {
		font-size: 28rpx;
		/* color: #bcbcbc; */
		text-align: left;
		width: 93%;
		margin: 0 auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.slot-content3 div {
		padding-top: 30rpx;
	}
	
	.policy {
		font-size: 21rpx;
		color: #9d9d9d;
		text-align: center;
	}
	
	.policy span {
		font-weight: bold;
		text-decoration: underline;
	}
	
</style>

